<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h2>今天天气一般</h2>
			<button @click='changeWeather'>点我切换天气</button>
		</div>
		<script>
			Vue.config.productionTip = false;
			let vm = new Vue({
				el: "#box",
				data: {
					isHot: true
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					}
				},
				computed: {
					weather() {
						return this.isHot ? "炎热" : "凉爽"
					}
				},
				//第一种写法
				/* watch: {//监视谁，做什么，写成一个配置对象
					weather:{
						immediate:true,
						//handler什么时候调用呢，当被监视的对象发生改变时，调用handler函数
						handler(newVal,oldVal){
							console.log('isHot被修改了',newVal,oldVal)
						}
					}
				}, */
				
			
			})
			vm.$watch('weather',{
				immediate:true,
				//handler什么时候调用呢，当被监视的对象发生改变时，调用handler函数
				handler(newVal,oldVal){
					console.log('isHot被修改了',newVal,oldVal)
				}
			})
		</script>
	</body>
</html>
